<template>
    <view class="container" style="paddingBottom:1rpx;">
      <u-navbar
			leftIconSize="40rpx"
			leftIconColor="#333333"
			title="商品信息"
		>
		</u-navbar>
      <view class="section">
        <view class="section-title">{{ title}}</view>
        <view class="form-view">
          <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
            :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
            <u-form-item label="商品名称" prop="name" required >
              <u--input v-model="form.name"  placeholder="请填写商品名称"
                inputAlign="right" border="none"></u--input>
            </u-form-item>
            <u-form-item label="商品编码" prop="code" required >
              <u--input v-model="form.code"  placeholder="请填写商品编码"
                inputAlign="right" border="none"></u--input>
            </u-form-item>
            <u-form-item label="类别" prop="categoryName" required @click="handleShowCategory">
              <u--input v-model="form.categoryName" disabled disabledColor="#ffffff" placeholder="请选择类别"
                inputAlign="right" border="none"></u--input>
              <u-icon slot="right" name="arrow-down"></u-icon>
            </u-form-item>
            <u-form-item label="单位" prop="unitName" required @click="handleShowUnit">
              <u--input v-model="form.unitName" disabled disabledColor="#ffffff" placeholder="请选择单位"
                inputAlign="right" border="none"></u--input>
              <u-icon slot="right" name="arrow-down"></u-icon>
            </u-form-item>
            <u-form-item label="排序" prop="ranking" required >
              <u--input v-model="form.ranking"  type="number" placeholder="请填写排序"
                inputAlign="right" border="none"></u--input>
            </u-form-item>
            <u-form-item label="备注" prop="remark"  labelPosition="top">
              <u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
                maxlength="20000" style="padding:18rpx 0;"></u--textarea>
            </u-form-item>
          </u--form>
          <view class="form-btn">
            <u-button type="primary" text="提交" @click="submit"></u-button>
          </view>
        </view>
      </view>
      <u-toast ref="uToast"></u-toast>
      <u-picker itemHeight="88" :show="showCategory" :columns="categoryList" keyName="dictLabel" @cancel="handleCategoryCancel"
        @confirm="handleCategoryConfirm"></u-picker>
        <u-picker itemHeight="88" :show="showUnit" :columns="unitList" keyName="dictLabel" @cancel="handleUnitCancel"
        @confirm="handleUnitConfirm"></u-picker>
    </view>
  </template>
  
  <script setup>
  import {getProductInfor, addProductInfor, updateProductInfor } from '@/api/invest/productInfor'
  import { getDicts } from '@/api/system/dict/data.js'
  const { proxy } = getCurrentInstance()
  import dayjs from 'dayjs'
  import {onLoad,onReady} from "@dcloudio/uni-app";
    // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
const datePickShow = ref(false)
const showCategory = ref(false)
const showUnit = ref(false)
const title = ref("商品信息")
const flag = ref('add')
const categoryList = ref([])
const unitList = ref([])
const data = reactive({
  form: {},
  rules: {
          name: [{ type: 'string', required: true, message: '商品名称不能为空', trigger: ['change', 'blur'] }],
          code: [{ type: 'string', required: true, message: '商品编码不能为空', trigger: ['change', 'blur'] }],
          unitName: [{ type: 'string', required: true, message: '单位不能为空', trigger: ['change', 'blur'] }],
          categoryName: [{ type: 'string', required: true, message: '类别不能为空', trigger: ['change', 'blur'] }],
  }
})
const { form, rules} = toRefs(data)

onLoad((option) => {
       form.value.id = option.id
       flag.value = option.flag
     if(flag.value==null){
      if(form.value.id!=null){
      title.value="商品信息-修改"
     }else{
      title.value="商品信息-新增"
     }
     }else{
      title.value="商品信息-复制"
     }
      getDict()
  })
  onReady(() => {
  })
  function  getDict() {
        // 类型
        getDicts('product_category').then(res => {
          categoryList.value =[res.data] 
      })
       // 类型
       getDicts('product_unit').then(res => {
          unitList.value =[res.data] 
      })
      if(form.value.id!=null){
        getProductInfor(form.value.id).then(res => {
          form.value = res.data
           // 类型
        getDicts('product_category').then(result => {
          form.value.categoryName=dictStr(form.value.category, result.data)
      })
       // 类型
       getDicts('product_unit').then(result => {
          form.value.unitName=dictStr(form.value.unit, result.data)
      })
          
        })
      }
  }
  function dictStr(val, arr) {
      let str = ''
      arr.map(item => {
        if (item.dictValue === val) {
          str = item.dictLabel
        }
      })
      return str
    }

  function handleShowCategory() {
        if (categoryList.value[0].length === 0) {
          proxy.$refs['uToast'].show({
            message: '类别为空  ', type: 'warning'
          })
        } else {
          showCategory.value = true
        }
      }
      function   handleCategoryConfirm(e) {
        form.value.categoryName = e.value[0].dictLabel
        form.value.category = e.value[0].dictValue
        showCategory.value = false
      }
      function handleCategoryCancel() {
       showCategory.value = false
      }

      function handleShowUnit() {
        if (unitList.value[0].length === 0) {
          proxy.$refs['uToast'].show({
            message: '单位为空  ', type: 'warning'
          })
        } else {
          showUnit.value = true
        }
      }
      function   handleUnitConfirm(e) {
        form.value.unitName = e.value[0].dictLabel
        form.value.unit = e.value[0].dictValue
        showUnit.value = false
      }
      function handleUnitCancel() {
       showUnit.value = false
      }
      function submit() {
        proxy.$refs['uForm'].validate().then(() => {
          if (form.value.id != null) {
            if(flag.value==null){
            updateProductInfor(form.value).then(res => {
            proxy.$refs['uToast'].show({
            message: '修改成功', complete() {
              uni.navigateTo({ url: `/pages/work/product/productInfor/list` })
            }
          })
        })
          }else {
            form.value.id == null
            addProductInfor(form.value).then(res => {
            proxy.$refs['uToast'].show({
            message: '新增成功', complete() {
              uni.navigateTo({ url: `/pages/work/product/productInfor/list` })
            }
          })
        })
          }
          }else {
            addProductInfor(form.value).then(res => {
              proxy.$refs['uToast'].show({
              message: '新增成功', complete() {
                uni.navigateTo({ url: `/pages/work/product/productInfor/list` })
              }
            })
          })
          }
        })
      }
  </script>
  
  <style lang="scss" scoped>
  .section {
    margin: 24rpx;
    padding: 16rpx 24rpx;
    background-color: #fff;
    border-radius: 8rpx;
  
    .section-title {
      width: 360rpx;
      color: #333333;
      line-height: 44rpx;
      font-size: 30rpx;
      border-left: 6rpx solid #2681FF;
      padding-left: 26rpx;
    }
  
    .form-view {
      padding: 20rpx 0rpx 0 10rpx;
  
      .form-btn {
        padding-top: 20rpx;
      }
    }
  }
  </style>